<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生注册页面</title>
    <link rel="stylesheet" href="../css/register_stu.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <div class="header">
        <div class="logo"><a href="index.html" target="_blank"><img src="../images/logo.png" alt="logo"></a></div>
    </div>
    <div class="content" id="app">
        <form action="">
            <table class="con-table">
                <thead class="con-th">
                    <tr class="con-th-top">
                        <th colspan="2">学生注册</th>
                    </tr>
                </thead>
                <tbody class="con-tb">
                    <tr>
                        <td><i>*</i>账户地址</td>
                        <td><input type="text" class="resizeto_1" v-model="stu_info.studentaccount"></td>
                    </tr>
                    <tr>
                        <td><i>*</i>真实姓名</td>
                        <td><input type="text" class="resizeto_2" v-model="stu_info.studentname"></td>
                    </tr>
                    <tr>
                        <td>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</td>
                        <td>
                            <input type="radio" checked="checked" name="gender" id="male" value="男"
                                v-model="stu_info.sex">&nbsp;<label for="male">男</label>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="gender" id="female" value="女" v-model="stu_info.sex">&nbsp;<label
                                for="female">女</label>
                        </td>
                    </tr>
                    <tr>
                        <td><i>*</i>身份证号</td>
                        <td><input type="text" class="resizeto_3" v-model="stu_info.cardid"></td>
                    </tr>
                    <tr>
                        <td>入校日期</td>
                        <td><input type="date" v-model="stu_info.admissiontime"></td>
                    </tr>
                    <tr>
                        <td>毕业日期</td>
                        <td><input type="date" name="" id="" v-model="stu_info.leavingtime"></td>
                    </tr>
                    <tr>
                        <td>所学专业</td>
                        <td>
                            <select name="" id="" class="select_1" v-model="stu_info.major">
                                <option value="软件工程" selected="selected">软件工程</option>
                                <option value="计算机信息与技术">计算机信息与技术</option>
                                <option value="中国传统乐器">中国传统乐器</option>
                                <option value="地址检测与勘探">地址检测与勘探</option>
                            </select>
                            </td?>
                    </tr>
                    <tr>
                        <td>教育类型</td>
                        <td>
                            <select name="" id="" class="select_2" v-model="stu_info.typeofeducation">
                                <option value="1" selected="selected">全日制</option>
                                <option value="0">非全日制</option>
                            </select>
                        </td>
                    </tr>
                    <tr class="btn">
                        <td colspan="2" class="submit"><button @click="submit" type="button">注册</button></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                stu_info: {
                    studentaccount: '',
                    studentname: '',
                    sex: '男',
                    cardid: '',
                    birthday: '',
                    admissiontime: '',
                    leavingtime: '',
                    major: '软件工程',
                    typeofeducation: 1,

                }
            },
            methods: {
                submit() {
                    if (this.stu_info.studentaccount && this.stu_info.studentname && this.stu_info.cardid) {
                        console.log(this.stu_info);
                        axios.post("http://localhost:80/studentregister", this.stu_info).then(response => {
                            if (response.data.code == 200) {
                                alert("添加成功")
                            } else {
                                alert("添加失败")
                            }
                        })
                    } else {
                        alert("你还有未填写的必要信息");
                    }
                }

            },
            watch:{
            'stu_info.cardid': {
                handler(val) {
                   this.stu_info.birthday = val.substr(6,4) + '-' + val.substr(10,2) + '-' + val.substr(12,2);
                }
            } 
        }

        })
    </script>
</body>

</html>